import Markers from './MarkerManager.js'
import store from '../../../store'
class MapUtil {
	// _map
	// MarKers_building
	// idList
	constructor(map) {
		this._map = map;
		this.idList = [];
		if (!this.MarKers_building) {
			this.MarKers_building = new Markers(map);
		}
	}

	//清空所有的选中效果
	cleanidListStyle() {
		if (this.idList.length > 0) {
			this.idList.forEach((item) => {
				let cureentdiv = document.getElementById(`${item.id}`);
				if (cureentdiv) {
					cureentdiv.setAttribute("style", "");
				}
			})
		}
	}

	addBuildingMarker(data, type) {
		let map = this._map;
		for (let i = 0; i < data.length; i++) {
			let powerType;
			let className = '';

			if (!data[i].leave) {
				className = 'map_power1'
			} else {
				if (data[i].leave == '0') {
					className = 'map_power1'
				} else {
					className = 'map_power' + data[i].leave
				}
			}

			//循环数据
			let dataList = JSON.stringify(data[i]); //把对象转换成json字符串
			var el = document.createElement("div"); //建立div
			//建立html把上方的num数字显示在地图上，i为当前坐标生成的html
			var x = ''
			var y = ''
			//发现力量
			let container = map.getCanvas().parentElement;
			container.style.cursor = "pointer";
			el.innerHTML =
				`
	          <div class="map_power" data-key="${i}" data-obj='${dataList}'>
	              <div class="map_power_common ${className}" id="${data[i].id}" title="${data[i].username}"></div>
	          </div>`;
			this.idList.push(data[i]);

			x = data[i].lat;
			y = data[i].lon;
			var coordinates = [x, y]; //坐标
			let properties = data[i]; //当前对象
			let offset = [0, 0]; //偏移量
			// let code = data[i].user_type
			let currentData = data[i];
			//回显到地图中
			if (this.MarKers_building) {
				this.MarKers_building.addMarker(el, coordinates, offset, properties);
			}

			el.addEventListener("click", (e) => {
				//将当前点击对象图标宽度放大
				this.cleanidListStyle();
				let cureentdiv = document.getElementById(`${currentData.id}`);
				store.commit('updateBuildingInfo', currentData);
				cureentdiv.setAttribute("style", "position: absolute;\n" +
					"    width: 60px;\n" +
					"    height: 60px;\n" +
					"    background-size: 100% 100%;\n" +
					"    left: -30px;\n" +
					"    z-index: 90;\n" +
					"    top: -55px;\n");
				uni.$emit('updateBuildingInfo', currentData)
			})

			if (i == 0) {
				this.cleanidListStyle();
				let cureentdiv = document.getElementById(`${currentData.id}`);
				store.commit('updateBuildingInfo', currentData);
				cureentdiv.setAttribute("style", "position: absolute;\n" +
					"    width: 60px;\n" +
					"    height: 60px;\n" +
					"    background-size: 100% 100%;\n" +
					"    left: -30px;\n" +
					"    z-index: 90;\n" +
					"    top: -55px;\n");
			}
		}
	}


}

export {
	MapUtil
}

export default MapUtil
